<!doctype html>
{php}
$static = '/static/home/';
{/php}
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>{$siteConfig['seo_title']}</title>
    <meta name="apple-mobile-web-app-title" content="{$siteConfig['seo_title']}">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="shortcut icon" href="{$static}images/favicon.ico">
    <link href="{$static}css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <link href="{$static}css/icons.min.css" rel="stylesheet" type="text/css" />
    <link href="{$static}css/app.min.css" rel="stylesheet" type="text/css" />
    <link href="{$static}css/style.css" rel="stylesheet" type="text/css" />
    <link href="{$static}libs/cxCalendar/css/jquery.cxcalendar.css" rel="stylesheet" type="text/css" />
</head>
<body data-sidebar="dark">

<div id="layout-wrapper">

    {include file='public/mine_topbar' /}
    {include file='public/mine_left' /}

    <!-- ============================================================== -->
    <!-- Start right Content here -->
    <!-- ============================================================== -->
    <div class="main-content">

        <div class="page-content">
            <div class="container-fluid">

                <!-- start page title -->
                <div class="row">
                    <div class="col-12">
                        <div class="page-title-box d-flex align-items-center justify-content-between">
                            <h4 class="mb-0 font-size-18"><i class="mdi mdi-chart-areaspline"></i> 短链统计</h4>

                            <div class="page-title-right">
                                <ol class="breadcrumb m-0">
                                    <li class="breadcrumb-item"><a href="javascript: void(0);">鹰眼短链</a></li>
                                    <li class="breadcrumb-item"><a href="{:url('url/index')}">我的短链</a></li>
                                    <li class="breadcrumb-item active">短链统计</li>
                                </ol>
                            </div>

                        </div>
                    </div>
                </div>
                <!-- end page title -->

                <div class="row">
                    <div class="col-12">
                        <div class="card">
                            <div class="card-body">
                                <div class="row">
                                   <div class="col-xl-4 col-md-6 border-right">
                                        <div class="items-statistics-top">短链接</div>
                                       <div class="items-statistics-bottom">
                                           <a href="{$info.shortUrl}" target="_blank">{$info.shortUrl}</a>
                                       </div>
                                   </div>
                                   <div class="col-xl-4 col-md-6 border-right">
                                       <div class="items-statistics-top">原始链接</div>
                                       <div class="items-statistics-bottom">
                                           <a href="{$info.link}" target="_blank">{$info.link}</a>
                                       </div>
                                   </div>
                                   <div class="col-xl-4 col-md-6">
                                       <div class="items-statistics-top">链接类型</div>
                                       <div class="items-statistics-bottom">
                                           {switch $info.link_type }
                                               {case 0}
                                                    普通链接
                                               {/case}
                                               {case 1}
                                                    时间链接
                                               {/case}
                                               {case 2}
                                                    私密链接
                                               {/case}
                                           {/switch}
                                       </div>
                                   </div>
                                </div>
                                <div class="dropdown-divider"></div>
                                <div class="row">
                                   <div class="col-xl-4 col-md-6 border-right">
                                       <div class="items-statistics-top">
                                           总浏览量(PV)
                                       </div>
                                       <div class="items-statistics-bottom">{$info.clicks}</div>
                                   </div>
                                   <div class="col-xl-4 col-md-6 border-right">
                                       <div class="items-statistics-top">有效时间</div>
                                       <div class="items-statistics-bottom">{$info.expire_time}</div>
                                   </div>
                                   <div class="col-xl-4 col-md-6">
                                       <div class="items-statistics-top">创建时间</div>
                                       <div class="items-statistics-bottom">{$info.create_time}</div>
                                   </div>
                               </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- end row -->

                <div class="row">
                    <div class="col-12">
                        <div class="card">
                            <div class="card-body">
                                <div class="row">
                                    <div class="col-xl-4 col-md-6 border-right">
                                        <div class="items-statistics-top"><i class="mdi mdi-eye-circle"></i> 今日浏览量</div>
                                        <div class="items-statistics-middle">{$todayPv}</div>
                                        <div class="items-statistics-bottom">昨日浏览量: {$yesterdayPv}</div>
                                    </div>
                                    <div class="col-xl-4 col-md-6 border-right">
                                        <div class="items-statistics-top"><i class="mdi mdi-eye-circle"></i> 今日访客量</div>
                                        <div class="items-statistics-middle"> {$todayUv}</div>
                                        <div class="items-statistics-bottom">昨日访客量: {$yesterdayUv}</div>
                                    </div>
                                    <div class="col-xl-4 col-md-6">
                                        <div class="items-statistics-top"><i class="mdi mdi-eye-circle"></i> 今日 IP 数</div>
                                        <div class="items-statistics-middle">{$todayIp}</div>
                                        <div class="items-statistics-bottom">昨日 IP 数: {$yesterdayIp}</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- end row -->

                <div class="row">
                    <div class="col-xl-12">
                        <div class="card">
                            <div class="card-body">
                                <h4 class="header-title mb-4">访问走势图</h4>
                                <div id="revenue-chart" class="apex-charts" dir="ltr"></div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- end row -->

                <div class="row">
                    <div class="col-12">
                        <div class="card">
                            <div class="card-body">
                                <div class="header-title">访问统计</div>
                                <div class="table-responsive pb-5">
                                    <table id="datatable" class="table table-bordered dt-responsive nowrap" style="border-collapse: collapse; border-spacing: 0; width: 100%;">
                                        <thead>
                                            <tr>
                                                <th>日期</th>
                                                <th>访问量(PV)</th>
                                                <th>访客量(UV)</th>
                                                <th>独立IP数(IP)</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                        {empty name="list"}
                                            <tr>
                                                <td>--</td>
                                                <td>--</td>
                                                <td>--</td>
                                                <td>--</td>
                                            </tr>
                                        {else /}
                                            {foreach name="list" item="vo"}
                                            <tr>
                                                <td>{$vo.create_date}</td>
                                                <td>{$vo.pv}</td>
                                                <td>{$vo.uv}</td>
                                                <td>{$vo.ip}</td>
                                            </tr>
                                            {/foreach}
                                        {/empty}
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div> <!-- end col -->
                </div> <!-- end row -->

            </div> <!-- container-fluid -->
        </div>
        <!-- End Page-content -->
    </div>
    <!-- end main content-->
</div>

<style type="text/css">
  .items-statistics-top {
      height: 35px;
      line-height: 35px;
      overflow: hidden;
  }
  .items-statistics-middle {
      min-height: 40px;
      font-size:1rem;
      color:#7c8a96;
      padding-top: .8rem;
      padding-bottom: .8rem;
  }
  .items-statistics-bottom {
      min-height: 40px;
      font-size:.8rem;
      color:#7c8a96;
      padding-top: .8rem;
      padding-bottom: .8rem;
  }
</style>
<script src="{$static}libs/jquery/jquery.min.js"></script>
<script src="{$static}libs/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="{$static}libs/metismenu/metisMenu.min.js"></script>
<script src="{$static}libs/simplebar/simplebar.min.js"></script>
<script src="{$static}libs/node-waves/waves.min.js"></script>
<script src="{$static}js/app.js"></script>

<!-- apexcharts -->
<script src="{$static}libs/apexcharts/apexcharts.min.js"></script>
<script src="{$static}libs/slick-slider/slick/slick.min.js"></script>
<script type="text/javascript">
    var seriesPv = JSON.parse('{:$seriesPv}');
    var seriesUv = JSON.parse('{:$seriesUv}');
    var seriesIp = JSON.parse('{:$seriesIp}');
    var xAxisDate = JSON.parse('{:$xAxisDate}');

    var options = {
        chart: {
            height: 450,
            type: "line",
            zoom: {
                enabled: !1
            },
            toolbar: {
                show: !1
            }
        },
        dataLabels: {
            enabled: !1
        },
        stroke: {
            width: 3,
            curve: "smooth",
            dashArray: [0, 8]
        },
        series: [{
            name: "访问量(PV)",
            data: seriesPv
        },
        {
            name: "访客量(UV)",
            data: seriesUv
        },
        {
            name: "独立IP数(IP)",
            data: seriesIp
        }],
        colors: ["#3d8ef8", "#11c46e", "#11c46e"],
        fill: {
            opacity: [1, .15]
        },
        markers: {
            size: 0,
            hover: {
                sizeOffset: 6
            }
        },
        xaxis: {
            categories: xAxisDate
        },
        grid: {
            borderColor: "#f1f1f1"
        }
    };
    (chart = new ApexCharts(document.querySelector("#revenue-chart"),options)).render();
</script>
</body>
</html>